<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>咿呀口腔 - 主页</title>
    <script src="${ctxPath}/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctxPath}/static/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="${ctxPath}/static/js/plugins/ztree/jquery.ztree.all.min.js"></script>
    <script src="${ctxPath}/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${ctxPath}/static/js/plugins/validate/bootstrapValidator.min.js"></script>
    <script src="${ctxPath}/static/js/plugins/validate/zh_CN.js"></script>
    <script src="${ctxPath}/static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="${ctxPath}/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="${ctxPath}/static/js/plugins/jquery-treegrid/js/jquery.treegrid.min.js"></script>
    <script src="${ctxPath}/static/js/plugins/jquery-treegrid/js/jquery.treegrid.bootstrap3.js"></script>
    <script src="${ctxPath}/static/js/plugins/jquery-treegrid/extension/jquery.treegrid.extension.js"></script>
    <script src="${ctxPath}/static/js/plugins/layer/layer.min.js"></script>
    <script src="${ctxPath}/static/js/plugins/iCheck/icheck.min.js"></script>
    <script src="${ctxPath}/static/js/plugins/layer/laydate/laydate.js"></script>
    <script src="${ctxPath}/static/js/plugins/webuploader/webuploader.min.js"></script>
    <script src="${ctxPath}/static/js/common/ajax-object.js"></script>
    <script src="${ctxPath}/static/js/common/bootstrap-table-object.js"></script>
    <script src="${ctxPath}/static/js/common/tree-table-object.js"></script>
    <script src="${ctxPath}/static/js/common/web-upload-object.js"></script>
    <script src="${ctxPath}/static/js/common/ztree-object.js"></script>
    <script src="${ctxPath}/static/js/common/Feng.js"></script>
    <script src="${ctxPath}/static/js/plugins/selectpicker/bootstrap-select.min.js"></script>
    <script src="${ctxPath}/static/js/plugins/selectpicker/defaults-zh_CN.js"></script>
    <script src="${ctxPath}/static/js/plugins/bootstrap-table/bootstrap-table-export.min.js"></script>
    <script src="${ctxPath}/static/js/plugins/bootstrap-table/tableExport.min.js"></script>
    <link rel="shortcut icon" href="${ctxPath}/static/favicon.ico">
    <link href="${ctxPath}/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctxPath}/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctxPath}/static/css/animate.css" rel="stylesheet">
    <link href="${ctxPath}/static/css/style.css?v=4.1.0" rel="stylesheet">
    <script>if (window.top !== window.self) {
        window.top.location = window.location;
    }</script>
    <script src="${ctxPath}/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctxPath}/static/js/bootstrap.min.js?v=3.3.6"></script>
</head>

<style>

    .navbar-default, .navbar-static-side {
        background: url("${ctxPath}/static/img/x7.png") no-repeat !important;
        background-size: 100% 100% !important;
    }

    .nav-header {
        background: transparent !important;
    }

    .navbar, .navbar-static-top {
        /*background: url("${ctxPath}/static/img/x3.png") no-repeat !important;*/
        background-color: #ebebeb;
        background-size: cover !important;
    }

    .navbar-default .nav > li > a:hover {
        /*background: transparent !important;*/
        color: #e4ff00 !important;
    }

    .navbar-default .nav > li > a:focus {
        /*background: url("${ctxPath}/static/img/x11.png") no-repeat !important;*/
        background-size: cover !important;
        /*color: #e4ff00 !important;*/
    }

    .active > a {
        /*background: url("${ctxPath}/static/img/x11.png") no-repeat !important;*/
        background-size: cover !important;
    }

    .nav.nav-second-level.collapse[style] {
        background: url("${ctxPath}/static/img/x16.png") no-repeat !important;
        background-size: cover !important;
        /*border-left: 4px solid #baff00;*/
    }

    .btn-primary {
        display: inline-block;
        width: 35px;
        height: 31px;
        background: url("${ctxPath}/static/img/shouhui.png") no-repeat !important;
        background-size: cover !important;
        border-color: transparent !important;
    }

    .page-tabs a.active {
        background: #ffffff !important;
        background-size: cover !important;
        color: #444444 !important;
    }

    .page-tabs a {
        background: none !important;
        background-size: cover !important;
        color: black !important;
    }

    .page-tabs a:hover {
        background: #dfdddd !important;
        background-size: cover !important;
        color: #666666; !important;
    }

    .i_log {
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: url("${ctxPath}/static/img/x0.png") no-repeat;
        background-size: cover;
        position: relative;
        top: 2px;
        color: #666666;
        font-size: 27px;
    }
</style>

<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
<div id="wrapper">

    <!--左侧导航开始-->
    @include("/common/_tab.html"){}
    <!--左侧导航结束-->

    <!--右侧部分开始-->
    @include("/common/_right.html"){}
    <!--右侧部分结束-->


</div>

<!-- 全局js -->
<script src="${ctxPath}/static/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctxPath}/static/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${ctxPath}/static/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="${ctxPath}/static/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="${ctxPath}/static/js/plugins/layer/layer.min.js"></script>
<!-- 自定义js -->
<script src="${ctxPath}/static/js/hplus.js?v=4.1.0"></script>
<script type="text/javascript" src="${ctxPath}/static/js/contabs.js"></script>

<!-- 第三方插件 -->
<script src="${ctxPath}/static/js/plugins/pace/pace.min.js"></script>
<script>
    $.ajax({
        url: Feng.ctxPath + "/kaptcha/getLoniner",
        type: "get",
        success: function (data) {
            var toUrl="${ctxPath}/index";
            if(data.name=="超级管理员"){
                toUrl="${ctxPath}/paymentRecord";
                goToUrl(toUrl);
            }else if(data.name=="公共TC"||data.name=="前台"){
                toUrl="${ctxPath}/customer";
                goToUrl(toUrl);
            }else if(data.name=="TC"){
                toUrl="${ctxPath}/consultant";
                goToUrl(toUrl);
            }else if(data.name=="网电管理员"||data.name=="网电咨询"||data.name=="电销咨询"||data.name=="电销咨询主管"||data.name=="市场"){
                toUrl="${ctxPath}/reservation/reservationsRecord";
                goToUrl(toUrl);
            }else if(data.name=="医生"){
                toUrl="${ctxPath}/doctorLooked";
                goToUrl(toUrl);
            }else if(data.name=="用户上门"){
                window.location="${ctxPath}/customer/customer_information";
            }
        },
        error: function (data) {
            alert('内部故障!');
        }
    });
    function goToUrl(toUrl) {
        // 获取标识数据
        var dataUrl = toUrl,
            dataIndex = $(this).data('index'),
            menuName = $.trim($(this).text()),
            flag = true;
        if (dataUrl == undefined || $.trim(dataUrl).length == 0) {
            dataUrl = "${ctxPath}/index";
        }
        // 选项卡菜单已存在
        $('.J_menuTab').each(function () {
            if ($(this).data('id') == dataUrl) {
                if (!$(this).hasClass('active')) {
                    $(this).addClass('active').siblings('.J_menuTab').removeClass('active');
                    scrollToTab(this);
                    // 显示tab对应的内容区
                    $('.J_mainContent .J_iframe').each(function () {
                        if ($(this).data('id') == dataUrl) {
                            $(this).show().siblings('.J_iframe').hide();
                            return false;
                        }
                    });
                }
                flag = false;
                return false;
            }
        });

        // 选项卡菜单不存在
        if (flag) {
            var str = '<a href="javascript:;" class="active J_menuTab" data-id="' + dataUrl + '">' + menuName + ' <i class="i_log"></i></a>';
            $('.J_menuTab').removeClass('active');

            // 添加选项卡对应的iframe
            var str1 = '<iframe class="J_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
            $('.J_mainContent').find('iframe.J_iframe').hide().parents('.J_mainContent').append(str1);

            //显示loading提示
//            var loading = layer.load();
//
//            $('.J_mainContent iframe:visible').load(function () {
//                //iframe加载完成后隐藏loading提示
//                layer.close(loading);
//            });
            // 添加选项卡
            $('.J_menuTabs .page-tabs-content').append(str);
            scrollToTab($('.J_menuTab.active'));
        }
    }
    //滚动到指定选项卡
    function scrollToTab(element) {
        var marginLeftVal = calSumWidth($(element).prevAll()), marginRightVal = calSumWidth($(element).nextAll());
        // 可视区域非tab宽度
        var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".J_menuTabs"));
        //可视区域tab宽度
        var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
        //实际滚动宽度
        var scrollVal = 0;
        if ($(".page-tabs-content").outerWidth() < visibleWidth) {
            scrollVal = 0;
        } else if (marginRightVal <= (visibleWidth - $(element).outerWidth(true) - $(element).next().outerWidth(true))) {
            if ((visibleWidth - $(element).next().outerWidth(true)) > marginRightVal) {
                scrollVal = marginLeftVal;
                var tabElement = element;
                while ((scrollVal - $(tabElement).outerWidth()) > ($(".page-tabs-content").outerWidth() - visibleWidth)) {
                    scrollVal -= $(tabElement).prev().outerWidth();
                    tabElement = $(tabElement).prev();
                }
            }
        } else if (marginLeftVal > (visibleWidth - $(element).outerWidth(true) - $(element).prev().outerWidth(true))) {
            scrollVal = marginLeftVal - $(element).prev().outerWidth(true);
        }
        $('.page-tabs-content').animate({
            marginLeft: 0 - scrollVal + 'px'
        }, "fast");
    }
    function calSumWidth(elements) {
        var width = 0;
        $(elements).each(function () {
            width += $(this).outerWidth(true);
        });
        return width;
    }


    $(".navbar-default .nav li").on('click','a',function () {
        $(this).css({"background":"#2b6594","color":"#ffffff"}).parent().siblings().find('a').css({"background":"","color":"#ffffff"});
        $(this).find('a').css("color","#ffffff");
        $(".navbar-default .nav .nav-header ul > li > a").css('color','#666666')
    });

    $(".navbar-default .nav li > ul > li > a").click(function () {
        $(this).css("color","#e4ff00").parent().parent().siblings().css("color","#ffffff");
        $(this).parent().siblings().children().css("color","#ffffff");
        $(".navbar-default .nav .nav-header ul > li > a").css('color','#666666')
    })

</script>
</body>
</html>
